<template>
  <div class="nape">
    <div class="header">
      <img
        src="../../assets/img/report/report-bg.png"
        alt=""
      >
      <div class="title">
        <h4>{{tableData[0]&&tableData[0].studentName}}</h4>
        <p>{{tableData[0]&&tableData[0].examModelName}}</p>
      </div>
    </div>
    <div class="body">
      <div class="list">
        <h4>
          <span>01</span>总体概况
        </h4>

        <el-table
          :data="tableData"
          style="width: 100%"
          header-align="center"
          empty-text="暂无学生"
          class="report-table report1"
        >
          <el-table-column
            prop="studentName"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="sectionName"
            label="年级"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="lessonClassName"
            label="班级"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="schoolName"
            label="校区"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="subjectName"
            label="科目"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="getScore"
            label="得分"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="满分"
            prop="modelScore"
            align="center"
            width="60px"
          >
          </el-table-column>
          <el-table-column
            prop="classAvgScore"
            width="70px"
            label="班平均分"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="schoolAvgScore"
            label="校区平均分"
            align="center"
            width="80px"
          ></el-table-column>
          <el-table-column
            prop="modelAvgScore"
            width="70px"
            label="总平均分"
            align="center"
          ></el-table-column>
          <el-table-column
            class-name="nonprint"
            prop="classAvgRank"
            label="班排名"
            align="center"
            width="70px"
          ></el-table-column>
          <el-table-column
            prop="schoolAvgRank"
            label="校区排名"
            align="center"
            width="70px"
            class-name="nonprint"
          ></el-table-column>
          <el-table-column
            prop="modelAvgRank"
            label="总排名"
              width="60px"
            align="center"
            class-name="nonprint"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import io from '../../lib/io'
import util from '../../lib/util'

export default {
  components: {},

  data() {
    return {
      reportId: '',
      tableData: []
    }
  },
  watch: {},
  created() {
    this.reportId = this.$route.query.reportId
  },
  mounted() {
    this.reportInfo()
  },
  methods: {
    reportInfo() {
      let param = {
        reportId: this.reportId
      }
      io.post(io.reportInfo, param, ret => {
        this.tableData = [ret]
        console.log(ret)
        this.$emit('getInfo', ret)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.nape {
  .header {
    position: relative;
    width: 100%;
    height: 298px;
    img {
      height: 100%;
      width: 100%;
    }
    .title {
      position: absolute;
      top: 50%;
      width: 80%;
      max-width: 1040px;
      margin: 0 auto;
      left: 22%;
      h4 {
        margin: 0;
        font-size: 40px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-weight: 700;
      }
      p {
        margin-top: 20px;
        font-size: 30px;
        color: #fff;
      }
    }
  }
  .body {
    padding: 46px 0;
    background: #fff;
    .list {
      width: 80%;
      max-width: 960px;
      margin: 0 auto;
      h4 {
        font-size: 32px;
        color: #ff7853;
        margin: 0;
        height: 32px;
        line-height: 32px;
        font-weight: 100;
        span {
          height: 32px;
          line-height: 32px;
          font-weight: 100;
          // display: inline-block;
          float: left;
          font-size: 40px;
          color: #488eed;
          padding-right: 24px;
          margin-right: 17px;
          border-right: 2px solid #488eed;
        }
      }

      .table {
        width: 100%;

        tr {
          width: 100%;
          display: box; /* OLD - Android 4.4- */
          display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
          display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
          display: -ms-flexbox; /* TWEENER - IE 10 */
          display: -webkit-flex; /* NEW - Chrome */
          display: flex;
          th {
            text-align: center;
            padding: 15px 10px;
            font-size: 16px;
            line-height: 26px;
            -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-flex: 1; /* OLD - Firefox 19- */
            -webkit-flex: 1; /* Chrome */
            -ms-flex: 1; /* IE 10 */
            flex: 1;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.nape {
  .report-table {
    margin-top: 40px;
    border: 0 none !important;
    border-radius: 0;
    font-size: 16px;
    border-top: 1px solid #9ab9df !important;
    &.el-table th,
    .el-table__fixed-header-wrapper thead div,
    .el-table__header-wrapper thead div,
    .el-table__footer-wrapper thead div {
      background: rgb(231, 236, 255);
      color: #333;
      font-size: 18px;
      font-weight: normal;
    }
    &.el-table th,
    &.el-table td {
      border-bottom: 1px dashed #9ab9df;
    }
  }
}
</style>
<style lang="less">
@media print {
  .nonprint .cell{
     display: none!important;
  }
  .report-table {
    border: 0 !important;
  }
}
</style>




